<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="余浪人" />
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="css/base.css">
		<link rel="stylesheet" href="css/index.css">
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header>
					<el-row :gutter="20">
						<el-col :span="4">
							<div class="grid-content bg-purple">&nbsp;</div>
						</el-col>
						<el-col :span="16">
							<div class="grid-content bg-purple header_1">
								<div class="logo">
									<el-image src=""
									 fit="scale-down" alt="一站阅读"></el-image>
								</div>
								<div class="right">
									<div class="search">
										<el-input placeholder="请输入搜索..." v-model="search.key">
											<template slot="prepend">标题</template>
											<el-button icon="el-icon-search" slot="append" @click="handSearch"></el-button>
										</el-input>
									</div>
									<div class="bookrack">
										<el-link href="javascript:;" target="_blank" icon="el-icon-notebook-2" :underline="false">我的书架</el-link>
									</div>
									<div class="login_button">
										<el-button type="info" @click="login = true" icon="el-icon-s-custom" circle></el-button>
									</div>
								</div>
							</div>
							<!-- 导航 -->
							<div class="grid-content bg-purple">
								<el-menu class="el-menu-head" mode="horizontal" @select="handleNavSelect" background-color="#fff" text-color="#606266"
								 active-text-color="#ff3955">
									<el-submenu index="1">
										<template slot="title">全部分类</template>
										<el-menu-item index="1-1">现代言情</el-menu-item>
										<el-menu-item index="1-2">古代言情</el-menu-item>
										<el-menu-item index="1-3">浪漫青春</el-menu-item>
									</el-submenu>
									<el-menu-item index="2">排行榜</el-menu-item>
									<el-menu-item index="3">免费</el-menu-item>
									<el-menu-item index="4">完本</el-menu-item>
									<el-menu-item index="5">现言青春</el-menu-item>
									<el-menu-item index="6">古言玄幻</el-menu-item>
									<el-menu-item index="7">神秘幻想</el-menu-item>
									<el-menu-item index="8" style="float: right;">
										<el-link class="recharge" @click="recharge" target="_blank" icon="el-icon-money" :underline="false">充值</el-link>
									</el-menu-item>
								</el-menu>
							</div>
							<!-- end -->
						</el-col>
						<el-col :span="4">
							<div class="grid-content bg-purple">&nbsp;</div>
						</el-col>
					</el-row>
				</el-header>
				<!-- 主体 -->
				<el-main>
					<!-- 轮播、最新 -->
					<div class="index_top_row">
						<el-row>
							<el-col :span="4">
								<div class="grid-content bg-purple">&nbsp;</div>
							</el-col>
							<el-col :span="10">
								<div class="grid-content bg-purple">
									<template>
										<el-carousel :interval="4000" indicator-position="outside" height="260px">
											<el-carousel-item v-for="item in 6" :key="item">
												<h3 class="medium"><img height="100%" width="100%" src="https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/fbbd8ef9e6a9e5e70c2f2aced087e877.jpg"></h3>
											</el-carousel-item>
										</el-carousel>
									</template>
								</div>
							</el-col>
							<el-col :span="1">
								<div class="grid-content bg-purple">&nbsp;</div>
							</el-col>
							<el-col :span="5">
								<div class="grid-content bg-purple right">
									<div class="title">最新更新</div>
									<ul>
										<li v-for="i in 6">
											<el-link type="info" :underline="false">[古代言情]&nbsp;&nbsp;偶古基金的说法</el-link>
										</li>
									</ul>
								</div>
							</el-col>
							<el-col :span="4">
								<div class="grid-content bg-purple">&nbsp;</div>
							</el-col>
						</el-row>
					</div>
					<!-- 热门推荐 -->
					<div class="index_recommend_hot">
						<el-row>
							<el-col :span="4">
								<div class="grid-content bg-purple">&nbsp;</div>
							</el-col>
							<el-col :span="16">
								<div class="grid-content bg-purple">
									<div class="left">
										<strong>热门推荐</strong>
										<el-divider></el-divider>
										<div class="article">
											<article v-for="i in 9">
												<div class="article_left">
													<el-link href="javascript:;" type="info" :underline="false">
														<img src="https://bookcover.yuewen.com/qdbimg/349573/c_15697805505323304/90">
													</el-link>
												</div>
												<div class="article_right">
													<h4>
														<el-link href="javascript:;" type="info" :underline="false">快穿宿主她尔特人又软又甜</el-link>
													</h4>
													<div class="article_synopsis">神：项星，你上辈子拯救了银</div>
													<div class="article_msg">
														<div style="float: left"><i class="el-icon-user-solid"></i>作者</div>
														<div style="float: right;border: 1px solid #e7e7e7;">科幻空间</div>
													</div>
												</div>
											</article>

										</div>
									</div>
									<div class="right">
										<strong>随机强推</strong>
										<el-divider></el-divider>
										<ul>
											<li v-for="i in 10">
												<el-link href="javascript:;" type="info" :underline="false">「现代言情」</el-link>
												<el-link href="javascript:;" type="info" :underline="false" class="title">快穿宿主大法师打发斯蒂芬她又软又宿主</el-link>
											</li>
										</ul>
									</div>
								</div>
							</el-col>
							<el-col :span="4">
								<div class="grid-content bg-purple">&nbsp;</div>
							</el-col>
						</el-row>
					</div>
					<!-- 分类列表 -->
					<div class="index_nav_novel">
						<el-row>
							<el-col :span="4">
								<div class="grid-content bg-purple">&nbsp;</div>
							</el-col>
							<el-col :span="16">
								<strong>分类推荐</strong>
								<el-divider></el-divider>
								<div class="list_novel">
									<article class="nav_list_novel" v-for="i in 6">
										<h2>玄幻魔法</h2>
										<div class="top">
											<div class="image">
												<el-link href="" :underline="false" title="战气凌霄">
													<el-image src="https://www.hmtxt.com/files/article/image/1/1850/1850s.jpg" alt="战气凌霄"></el-image>
												</el-link>
											</div>
											<dl>
												<dt>
													<el-link href="" :underline="false">战气凌霄</el-link>
												</dt>
												<dd>陆天羽，本是陆府有名的废物少爷，机缘巧合之下，成不爽歪歪？...</dd>
											</dl>
										</div>
										<ul>
											<li v-for="s in 5">
												<el-link href="https://www.hmtxt.com/xs/15/15982/" :underline="false" title="总裁爹地天天宠">总裁爹地天天宠</el-link>南珺琦席承骁
											</li>
										</ul>
									</article>
								</div>
							</el-col>
							<el-col :span="4">
								<div class="grid-content bg-purple">&nbsp;</div>
							</el-col>
						</el-row>
					</div>
					<!-- 友情链接 -->
					<div class="links">
						<el-row>
							<el-col :span="4">
								<div class="grid-content bg-purple">&nbsp;</div>
							</el-col>
							<el-col :span="16">
								<div class="grid-content bg-purple">
									<strong class="el-icon-link">友情链接</strong>
									<el-divider></el-divider>
									<div class="links-list">
										<el-tooltip content="访问" placement="bottom" effect="light" v-for="i in 6">
											<el-link href="javascript:;" :underline=" false" icon="el-icon-orange">无声静候</el-link>
										</el-tooltip>
									</div>
								</div>
							</el-col>
							<el-col :span="4">
								<div class="grid-content bg-purple">&nbsp;</div>
							</el-col>
						</el-row>
					</div>
				</el-main>
				<el-footer>
					<el-row>
						<el-col :span="4">
							<div class="grid-content bg-purple">&nbsp;</div>
						</el-col>
						<el-col :span="16">
							<div class="grid-content bg-purple">
								<p>
									<el-link href="javascript:;" :underline=" false">哈密小说网</el-link>所有小说作品均来自网友上传或转载于其他网站，版权属于原创作者。如侵犯了您的权利，请与本站联系，本站将立刻删除。
								</p>
								<p>Copyright © 2016 哈密小说网(https://www.hmtxt.com) All Rights Reserved. 邮箱：hmtxt@hmtxt.com</p>
							</div>
						</el-col>
						<el-col :span="4">
							<div class="grid-content bg-purple">&nbsp;</div>
						</el-col>
					</el-row>
				</el-footer>
			</el-container>
			<!-- login -->
			<el-drawer :title="login_or_reg.title" :visible.sync="login" direction="rtl" :before-close="handleClose">
				<el-form ref="loginForm" :model="loginForm" :label-width="formLabelWidth" v-show="login_or_reg.status">
					<el-form-item label="用户账号">
						<el-input v-model="loginForm.username" placeholder="请输入账号..."></el-input>
						没有账号？<el-link :underline="false" @click="reg">注册</el-link>
					</el-form-item>
					<el-form-item label="用户密码">
						<el-input v-model="loginForm.password" placeholder="请输入密码" show-password></el-input>
					</el-form-item>
					<el-form-item label="验证码">
						<el-input v-model="loginForm.v_code" placeholder="请填写验证码"></el-input>
						<el-button @click="get_v_code" v-show="code_img.button" style="width: unset;">获取验证码</el-button>
						<el-image :src="code_img.url" fit="scale-down" v-show="code_img.img_show"></el-image>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">立即登录</el-button>
						<el-button>取消登录</el-button>
					</el-form-item>
				</el-form>
				<!-- 注册 -->
				<el-form ref="regForm" :model="regForm" :label-width="formLabelWidth" v-show="login_or_reg.status==false">
					<el-form-item label="用户账号">
						<el-input v-model="regForm.username" placeholder="请输入账号..."></el-input>
						已有账号？去<el-link :underline="false" @click="login_page">登录</el-link>
					</el-form-item>
					<el-form-item label="账号密码">
						<el-input v-model="regForm.password" placeholder="请输入密码" show-password></el-input>
					</el-form-item>
					<el-form-item label="确认密码">
						<el-input v-model="regForm.repassword" placeholder="请重复输入密码" show-password></el-input>
					</el-form-item>
					<el-form-item label="验证码">
						<el-input v-model="regForm.v_code" placeholder="请填写验证码"></el-input>
						<el-button @click="get_v_code" v-show="code_img.button" style="width: unset;">获取验证码</el-button>
						<el-image :src="code_img.url" fit="scale-down" v-show="code_img.img_show"></el-image>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">立即注册</el-button>
						<el-button>放弃注册</el-button>
					</el-form-item>
				</el-form>
			</el-drawer>
		</div>
	</body>
	<script type="text/javascript">
		var Main = {
			data() {
				return {
					search: {
						key: ''
					},
					loginForm: {},
					regForm: {},
					login: false,
					formLabelWidth: '80px',
					code_img: {
						url: '',
						status: false,
						button: true,
						img_show: false
					},
					login_or_reg: {
						'title': '用户登录面板',
						status: true
					},
				};
			},
			methods: {
				handleNavSelect: function(key, keyPath) {
					console.log(key);
				},
				handSearch: function() {
					var key = this.search.key;
					console.log(key)
				},
				handleClose: function(done) {
					done()
					this.code_img = {
						url: '',
						status: false,
						button: true,
						img_show: false
					} // 重置验证码
				},
				onSubmit: function() {
					console.log(this.loginForm)
				},
				get_v_code: function() {
					// 获取验证码
					this.code_img.url = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg';
					this.code_img.img_show = true; // 显示验证码
					this.code_img.button = false; // 隐藏验证码按钮
				},
				reg: function() {
					this.login_or_reg.status = false;
					this.login_or_reg.title = "用户注册面板";
				},
				login_page: function() {
					this.login_or_reg.status = true;
					this.login_or_reg.title = "用户登录面板";
				},
				recharge: function() {
					this.$prompt('请输入邮箱', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
						inputErrorMessage: '邮箱格式不正确'
					}).then(({
						value
					}) => {
						this.$message({
							type: 'success',
							message: '你的邮箱是: ' + value
						});
					}).catch(() => {});
				}
			}
		}
		var Ctor = Vue.extend(Main)
		new Ctor().$mount('#app')
	</script>
</html>
